<template>
  <div class="homepage">
    <div class="absolute">
      <img src="./assets/img/header1.png"  width="1920" style="width: 1920px" alt="">
    </div>
    <!--<div class="absolute bg-test" style="width: 50vh;height: 30vh">-->

    <!--</div>-->


    <div class="gis">
      <svg version="1.1" x="0px" y="0px" viewBox="0 0 1920 990" xml:space="preserve">
            <g id="hbck" transform="state.translate(0.000000, 0.000000)">
<!--                <image style="overflow:visible;" width="1920" height="990" id="map" xlink:href="/static/img/ccus/gkpt/u31.jpg"></image>-->
                <image style="overflow:visible;" width="1920" height="990" id="map"
                       xlink:href="./assets/img/3dmap.png"></image>
              <!-- 各厂 -->
              <polygon id="p-haiyang" @mouseover="orgHover('海洋采油厂')" @click="open('海洋采油厂')"
                       @mouseout="orgUnHover"
                       class="chang" points="1387 193 1477 193 1477 239 1387 239"></polygon>
              <path id="p-hekou" @mouseover="orgHover('河口采油厂')" @click="open('河口采油厂')" @mouseout="orgUnHover"
                    class="chang"
                    d="M1219.76865,199.110489 L1210.01464,199.231533 L1205.4399,173.909074 L1196.141,170.135846 L1165.64683,181.087988 L1163.38307,215.960227 L1132.53249,211.729592 L1117.01662,186.738537 L963.728068,168 L903.437754,202.425331 L910.514479,217.753286 L909.294089,221.141987 L880.138764,221.141987 L838.176139,247.915145 L789.422551,253.009707 L766.317218,280.766834 L765,294.90895 L773.03556,307.093754 L794.144107,300.588503 L818.377725,313.841053 L834.673793,307.970885 L879.214173,318.354795 L904.317474,314.820299 L912.067272,319.456817 L913.622428,335.533225 L917.174369,342.870197 L924.435894,342.870197 L943.218202,334.252354 L944.690699,334.252354 L945.752267,335.533225 L945.752267,344.368285 L935.388698,351.050655 L936.276093,357.288556 L944.690699,365.36985 L966.563093,373.46095 C1002.4054,373.46095 1020.32655,373.46095 1020.32655,373.46095 C1063.16899,369.343749 1084.59021,367.285149 1084.59021,367.285149 C1100.73602,370.339055 1108.80893,371.866008 1108.80893,371.866008 L1120.82778,368.246715 L1138.55405,401.708302 C1138.55405,408.486091 1138.55405,411.874986 1138.55405,411.874986 C1156.29079,413.958329 1165.15916,415 1165.15916,415 C1175.12573,400.293812 1180.10902,392.940719 1180.10902,392.940719 L1195.39374,387.866041 L1203.42064,373.46095 L1193.50403,373.46095 L1176.82875,363.326065 L1182.76795,346.242613 L1173.83187,338.334647 C1172.89931,328.464378 1172.43303,323.529243 1172.43303,323.529243 C1199.06134,313.366874 1212.3755,308.285689 1212.3755,308.285689 L1229,282.644959 L1212.3755,255.263091 L1201.26503,228.605833 L1218.52373,202.425331 L1219.76865,199.110489 Z"/>
              <path id="p-zhuangxi" @mouseover="orgHover('桩西采油厂')" @click="open('桩西采油厂')"
                    @mouseout="orgUnHover"
                    class="chang"
                    d="M1238.49847,170 C1235.56899,172.594874 1234.10425,173.892311 1234.10425,173.892311 C1231.84232,183.02214 1230.71135,187.587055 1230.71135,187.587055 C1227.17289,195.431815 1225.40366,199.354195 1225.40366,199.354195 L1222.69953,200.420678 C1210.23318,219.78938 1204,229.473731 1204,229.473731 C1208.54567,240.936448 1212.26313,249.421548 1215.1524,254.929032 C1215.07837,254.901388 1221.01415,254.901388 1232.95972,254.929032 C1265.45969,267.000625 1281.70968,273.036421 1281.70968,273.036421 C1335.95046,274.345474 1363.07086,275 1363.07086,275 L1373,267.322021 L1351.87196,251.669735 L1335.14552,251.669735 L1300.73834,206.097289 L1300.73834,203.506496 L1308.11791,198.063377 L1306.51649,188.090512 L1277.37432,175.599947 L1272.20044,182.261658 L1258.45919,182.261658 L1256.53305,174.627472 L1238.49847,170 Z"/>
              <path id="p-gudong" @mouseover="orgHover('孤东采油厂')" @click="open('孤东采油厂')" @mouseout="orgUnHover"
                    class="chang"
                    d="M1315,275.672868 L1364.77363,276.100091 C1371.43511,270.70003 1374.76586,268 1374.76586,268 L1377.82551,269.427805 L1387.15029,299.14852 C1407.18386,312.488773 1417.20064,319.1589 1417.20064,319.1589 C1421.17154,320.266195 1423.15699,320.819843 1423.15699,320.819843 L1429.98465,319.840883 L1432.24026,319.1589 L1434.01006,317.399462 L1434.54866,313.124758 L1449.32152,308.017029 L1450.46418,309.132295 L1454.96471,312.023761 L1458.28904,312.023761 L1459.99195,309.905019 L1462.55652,310.784295 L1461.10487,315.27125 L1465.51563,318.910578 L1479.22007,318.910578 L1498,328.718919 L1492.43921,334.589471 L1467.88468,338.049723 L1465.32689,348.345025 L1492.58343,377.158048 L1491.71808,390 L1487.40891,389.175622 L1475.77626,373.389911 L1442.56889,354.124996 L1435.60849,354.124996 L1435.60849,351.342821 L1423.15699,341.568388 L1391.70841,341.568388 C1388.72973,340.005659 1387.24039,339.224294 1387.24039,339.224294 C1387.24039,339.224294 1383.23377,339.519925 1383.17756,339.544794 C1383.10851,339.665183 1377.68801,343.819412 1376.27755,344.605279 C1376.3659,344.637798 1377.82551,354.124996 1377.82551,354.124996 C1377.82178,354.175048 1379.17342,370.421086 1377.82551,370.421086 C1377.74777,370.443227 1369.4654,368.479182 1352.97841,364.528952 L1350.47736,346.732063 C1340.30195,335.19785 1334.90713,327.374726 1334.29291,323.26269 L1340.85842,292.522391 C1323.61947,281.289376 1315,275.672868 1315,275.672868 Z"/>
              <path id="p-gudao" @mouseover="orgHover('孤岛采油厂')" @click="open('孤岛采油厂')" @mouseout="orgUnHover"
                    class="chang"
                    d="M1332.19954,329.074233 C1342.73027,341.118126 1347.99564,347.140072 1347.99564,347.140072 C1350.2686,360.121207 1351.40508,366.611774 1351.40508,366.611774 C1367.80169,371.018654 1376,373.222094 1376,373.222094 C1362.25492,390.687766 1355.38239,399.420601 1355.38239,399.420601 C1348.79415,417.351492 1345.50003,426.316938 1345.50003,426.316938 C1345.27738,427.438979 1345.16605,428 1345.16605,428 C1316.9122,422.423178 1302.78528,419.634767 1302.78528,419.634767 C1276.58391,403.021876 1263.48323,394.71543 1263.48323,394.71543 C1260.65182,392.660047 1259.23612,391.632356 1259.23612,391.632356 C1238.22324,372.890779 1227.71681,363.519991 1227.71681,363.519991 C1217.81239,363.526994 1212.86018,363.339454 1212.86018,362.957372 C1208.94711,362.673462 1207.55634,362.531508 1208.68788,362.531508 C1208.68788,362.531508 1203.64895,371.850437 1203.64895,371.850437 C1203.70033,371.850437 1195.3451,371.894363 1195.3451,371.894363 C1196.94268,371.894363 1181.21887,363.514548 1181.21887,363.514548 C1181.22524,363.514548 1186.23156,346.49983 1186.23156,346.49983 C1186.23156,346.49983 1176.35777,338.563277 1176.36617,338.475024 C1176.36617,338.475024 1176,326.126448 1176,326.126448 C1176,326.126448 1214.49072,309.962153 1214.49072,309.962153 C1214.49072,309.962153 1232.28222,283.271253 1232.28222,283.271253 C1232.28222,283.271253 1216.31678,257 1216.12772,257 C1215.62495,257 1232.82212,257.649015 1232.82212,257.649015 C1232.82212,257.649015 1278.47464,275.414124 1281.60417,275.411741 C1281.60417,275.411741 1311.23311,276.935401 1311.23311,276.935401 C1311.23311,276.935401 1338.39178,293.582941 1338.39178,293.583428 C1337.97374,293.475585 1332.19954,329.074233 1332.19954,329.074233 Z"/>
              <path id="p-dongxin" @mouseover="orgHover('东辛采油厂')" @click="open('东辛采油厂', $event)"
                    @mouseout="orgUnHover"
                    class="chang"
                    d="M1211.94635,365.081325 C1221.57126,365.027108 1226.38371,365 1226.38371,365 C1248.23408,384.667044 1259.15926,394.500565 1259.15926,394.500565 C1287.23138,412.176055 1301.26745,421.0138 1301.26745,421.0138 C1330.08698,426.596295 1344.49675,429.387542 1344.49675,429.387542 C1342.78567,441.471501 1341.93013,447.513481 1341.93013,447.513481 C1337.23214,449.291783 1334.88315,450.180934 1334.88315,450.180934 C1334.45606,453.143867 1334.24251,454.625333 1334.24251,454.625333 C1344.47367,470.804447 1349.58925,478.894004 1349.58925,478.894004 C1348.27631,499.180923 1347.61984,509.324383 1347.61984,509.324383 C1354.941,519.304741 1358.60158,524.29492 1358.60158,524.29492 C1358.26682,529.628548 1358.09944,532.295363 1358.09944,532.295363 C1364.87854,536.636898 1368.26809,538.807666 1368.26809,538.807666 C1369.19692,549.388242 1369.66134,554.678531 1369.66134,554.678531 C1373.22045,557.55951 1375,559 1375,559 C1363.84359,553.35889 1358.26539,550.538335 1358.26539,550.538335 C1325.76248,550.39043 1309.51102,550.316478 1309.51102,550.316478 C1289.28933,537.844258 1279.17848,531.608148 1279.17848,531.608148 C1277.09097,518.668767 1276.04721,512.199076 1276.04721,512.199076 C1266.59089,511.80722 1261.86272,511.611292 1261.86272,511.611292 C1239.64699,505.435381 1228.53912,502.347425 1228.53912,502.347425 C1222.39999,508.650785 1219.33042,511.802466 1219.33042,511.802466 C1205.25326,517.746976 1198.21468,520.719231 1198.21468,520.719231 C1184.572,508.845964 1177.75067,502.909331 1177.75067,502.909331 C1197.94814,494.908267 1208.04687,490.907735 1208.04687,490.907735 C1228.39684,496.737373 1238.57182,499.652191 1238.57182,499.652191 C1248.3534,493.62169 1253.24418,490.60644 1253.24418,490.60644 C1251.56342,475.063147 1250.72303,467.291501 1250.72303,467.291501 C1222.50363,434.506766 1208.39393,418.114398 1208.39393,418.114398 C1185.46464,414.081373 1174,412.064861 1174,412.064861 C1180.24191,402.296067 1183.36286,397.411669 1183.36286,397.411669 L1199.83169,392.018878 C1207.90813,374.060509 1211.94635,365.081325 1211.94635,365.081325 Z"/>
              <path id="p-shengcai" @mouseover="orgHover('胜利采油厂')" @click="open('胜利采油厂')"
                    @mouseout="orgUnHover"
                    class="chang"
                    d="M1071.24457,419.2622 C1064.64645,446.69098 1061.34739,460.40537 1061.34739,460.40537 C1049.53026,471.459955 1043.6217,476.987248 1043.6217,476.987248 C1039.20723,483.650605 1037,486.982283 1037,486.982283 C1046.50289,497.525311 1051.25433,502.796826 1051.25433,502.796826 C1077.07224,502.890101 1089.9812,502.936739 1089.9812,502.936739 C1101.59012,506.779245 1107.39458,508.700499 1107.39458,508.700499 C1123.72556,508.900166 1131.89105,509 1131.89105,509 C1141.72766,500.855168 1146.64596,496.782752 1146.64596,496.782752 C1162.28194,501.069774 1170.09994,503.213285 1170.09994,503.213285 C1195.57833,493.175256 1208.31753,488.156241 1208.31753,488.156241 C1228.39699,493.975019 1238.43673,496.884408 1238.43673,496.884408 C1246.81224,491.548038 1251,488.879853 1251,488.879853 C1249.34086,475.151618 1248.51129,468.2875 1248.51129,468.2875 C1220.53148,435.665908 1206.54158,419.355111 1206.54158,419.355111 C1184.06735,415.11837 1172.83023,413 1172.83023,413 C1169.74772,417.738096 1168.20647,420.107144 1168.20647,420.107144 C1137.92766,415.620454 1122.78826,413.377109 1122.78826,413.377109 L1089.15634,419.300458 C1077.21516,419.274953 1071.24457,419.2622 1071.24457,419.2622 Z"/>
              <path id="p-xianhe" @mouseover="orgHover('现河采油厂')" @click="open('现河采油厂')" @mouseout="orgUnHover"
                    class="chang"
                    d="M1034.93515,490 C1025.64505,502.96269 1021,509.444034 1021,509.444034 C1029.92328,518.353731 1034.38491,522.80858 1034.38491,522.80858 C1034.56833,530.754158 1034.66003,534.726948 1034.66003,534.726948 C1027.48254,534.883155 1023.8938,534.961259 1023.8938,534.961259 C1035.54134,545.784916 1041.36511,551.196744 1041.36511,551.196744 C1050.62324,551.365549 1055.25231,551.449951 1055.25231,551.449951 C1056.47309,562.497001 1057.08349,568.020526 1057.08349,568.020526 C1065.37828,573.542372 1069.52568,576.303294 1069.52568,576.303294 C1070.32411,587.731625 1070.72333,593.44579 1070.72333,593.44579 C1063.85209,614.024007 1060.41646,624.313115 1060.41646,624.313115 C1051.80364,624.268605 1047.49723,624.246349 1047.49723,624.246349 C1043.62538,629.943718 1041.68945,632.792402 1041.68945,632.792402 C1055.56907,633.085501 1062.50888,633.232051 1062.50888,633.232051 C1054.85772,654.376309 1051.03213,664.948439 1051.03213,664.948439 C1062.72595,702.718701 1068.57286,721.603832 1068.57286,721.603832 C1080.13711,729.12362 1085.91923,732.883514 1085.91923,732.883514 C1094.26347,730.568786 1098.43559,729.411422 1098.43559,729.411422 C1106.77044,736.183115 1110.93787,739.568962 1110.93787,739.568962 C1126.34771,734.952276 1134.05263,732.643932 1134.05263,732.643932 C1149.70062,744.881311 1157.52462,751 1157.52462,751 L1168.73897,745.244706 L1170.02586,745.244706 L1187.52599,751 C1195.19256,739.763111 1199.02585,734.144667 1199.02585,734.144667 L1200.2476,733.269959 L1201.77495,733.269959 C1206.9195,736.520455 1209.49177,738.145703 1209.49177,738.145703 L1235.50577,740.587505 C1237.81916,702.488343 1238.97585,683.438763 1238.97585,683.438763 C1246.02592,678.711923 1249.55096,676.348504 1249.55096,676.348504 C1246.69252,652.988303 1245.2633,641.308202 1245.2633,641.308202 C1267.61618,636.073539 1278.79261,633.456208 1278.79261,633.456208 C1286.96225,601.885924 1291.04706,586.100782 1291.04706,586.100782 C1305.01569,581.170487 1312,578.705339 1312,578.705339 C1309.69545,561.379255 1308.54318,552.716213 1308.54318,552.716213 C1287.03235,539.519731 1276.27694,532.92149 1276.27694,532.92149 C1274.29318,520.465677 1273.3013,514.23777 1273.3013,514.23777 C1265.31448,514.157775 1261.32107,514.117777 1261.32107,514.117777 C1239.81288,508.154469 1229.05879,505.172815 1229.05879,505.172815 C1223.41636,510.913368 1220.59514,513.783645 1220.59514,513.783645 C1205.09309,520.191233 1197.34207,523.395026 1197.34207,523.395026 C1182.39791,510.383556 1174.92583,503.877821 1174.92583,503.877821 C1171.54333,505.268501 1169.85208,505.963841 1169.85208,505.963841 C1154.94245,501.833645 1147.48763,499.768547 1147.48763,499.768547 C1138.18468,507.401902 1133.5332,511.218579 1133.5332,511.218579 C1116.34638,511.136123 1107.75296,511.094895 1107.75296,511.094895 C1096.27453,507.342521 1090.53531,505.466334 1090.53531,505.466334 L1050.02576,505.044515 C1039.96535,495.014838 1034.93515,490 1034.93515,490 Z"/>
              <path id="p-chunliang" @mouseover="orgHover('纯梁采油厂')" @click="open('纯梁采油厂', $event)"
                    @mouseout="orgUnHover"
                    class="chang"
                    d="M1020.35805,534 C1034.28535,546.501809 1041.24899,552.752713 1041.24899,552.752713 C1049.62008,552.850828 1053.80562,552.899886 1053.80562,552.899886 C1054.6813,563.486695 1055.11915,568.7801 1055.11915,568.7801 C1063.45608,574.129132 1067.62455,576.803648 1067.62455,576.803648 C1068.4328,586.994055 1068.83693,592.089258 1068.83693,592.089258 C1062.76232,611.316778 1059.72502,620.930539 1059.72502,620.930539 C1050.79656,620.935357 1046.33233,620.937766 1046.33233,620.937766 C1040.17365,629.893847 1037.09432,634.371888 1037.09432,634.371888 C1051.92488,634.477012 1059.34015,634.529573 1059.34015,634.529573 C1052.5234,654.345347 1049.11503,664.253234 1049.11503,664.253234 C1061.32686,702.868588 1067.43277,722.176265 1067.43277,722.176265 C1077.81092,729.704858 1083,733.469154 1083,733.469154 C1070.95499,738.177371 1064.93248,740.53148 1064.93248,740.53148 C1054.77763,736.70849 1049.7002,734.796995 1049.7002,734.796995 C1027.98197,730.574536 1017.12285,728.463306 1017.12285,728.463306 C1006.09713,735.951163 1000.58427,739.695091 1000.58427,739.695091 L983.216202,746.030752 L977.146409,727.015887 L974.849056,727.015887 L967.978013,750.650636 L934.86014,749.775775 L933.22743,740.53148 L927.053212,734.796995 L925.215592,733.469154 L919.871521,737.956612 L915.363508,737.956612 L906.47752,731.162351 L905.00703,731.162351 C904.423555,732.606235 904.131817,733.328178 904.131817,733.328178 L903.800796,738.626319 C850.398195,745.401431 823.696895,748.788987 823.696895,748.788987 C822.386176,743.561412 821.730817,740.947624 821.730817,740.947624 C818.733834,738.922786 817.235343,737.910366 817.235343,737.910366 C815.083663,737.935123 814.007823,737.947501 814.007823,737.947501 C810.68175,739.081098 809.018714,739.647897 809.018714,739.647897 C808.709594,741.534184 808.555034,742.477328 808.555034,742.477328 C809.688617,745.452911 810.255408,746.940703 810.255408,746.940703 C810.200705,749.789897 810.173353,751.214493 810.173353,751.214493 C806.539897,751.210584 804.723169,751.20863 804.723169,751.20863 C801.418803,750.029863 799.766621,749.44048 799.766621,749.44048 C798.671244,739.991233 798.123555,735.26661 798.123555,735.26661 C797.175358,733.293457 796.701259,732.30688 796.701259,732.30688 C795.490396,732.325556 794.884965,732.334894 794.884965,732.334894 C794.449072,733.847225 794.231125,734.603391 794.231125,734.603391 C793.944582,742.016506 793.80131,745.723064 793.80131,745.723064 C781.547676,745.764325 775.420859,745.784955 775.420859,745.784955 C775.133013,744.195314 774.989091,743.400493 774.989091,743.400493 C773.657098,742.887986 772.991102,742.631732 772.991102,742.631732 C765.315649,746.73266 761.477922,748.783124 761.477922,748.783124 C752.252096,748.841324 747.639183,748.870424 747.639183,748.870424 C741.457228,753.899077 738.366251,756.413403 738.366251,756.413403 C731.678938,749.436353 728.335281,745.947829 728.335281,745.947829 C726.535702,745.996908 725.635913,746.021447 725.635913,746.021447 C714.175049,761.152142 708.444617,768.717489 708.444617,768.717489 C703.305506,768.611948 700.73595,768.559177 700.73595,768.559177 C699.031452,764.044334 698.179203,761.786913 698.179203,761.786913 C692.282923,758.467342 689.334783,756.807556 689.334783,756.807556 C688.028406,756.959137 687.375217,757.034927 687.375217,757.034927 C686.786067,757.992186 686.491492,758.470816 686.491492,758.470816 C685.611457,769.536198 685.171439,775.068889 685.171439,775.068889 C673.747912,776.679378 668.036149,777.484623 668.036149,777.484623 C668.08217,774.671044 668.10518,773.264255 668.10518,773.264255 C666.795764,765.909774 666.141056,762.232534 666.141056,762.232534 C664.711812,760.874389 663.997191,760.195317 663.997191,760.195317 C662.921351,760.548426 662.383431,760.72498 662.383431,760.72498 C653.703774,767.727655 649.363945,771.228993 649.363945,771.228993 C648.43485,778.035351 647.970302,781.438531 647.970302,781.438531 L636.029912,793.703527 C607.833617,802.394002 593.735469,806.739239 593.735469,806.739239 C577.587451,809.579746 569.513442,811 569.513442,811 C562.322073,802.956674 558.726389,798.935012 558.726389,798.935012 C538.527256,792.741924 528.42769,789.645381 528.42769,789.645381 L526.00705,790.212179 C513.988729,802.604868 507.979568,808.801213 507.979568,808.801213 C499.239247,808.691854 494.869086,808.637175 494.869086,808.637175 C494.386268,803.845841 494.14486,801.450174 494.14486,801.450174 C492.986098,800.451957 492.406717,799.952848 492.406717,799.952848 C491.468906,799.851335 491,799.800578 491,799.800578 C493.313704,770.594671 494.470557,755.991718 494.470557,755.991718 C514.472289,752.694708 524.473155,751.046203 524.473155,751.046203 C533.100583,734.330293 537.414297,725.972337 537.414297,725.972337 C553.235977,733.224012 561.146817,736.84985 561.146817,736.84985 C576.86866,728.419307 584.729581,724.204036 584.729581,724.204036 C598.598715,723.685006 605.533281,723.425492 605.533281,723.425492 C622.466805,704.406423 630.933566,694.896888 630.933566,694.896888 C654.278468,683.535549 665.950919,677.854879 665.950919,677.854879 C677.440881,677.690056 683.185862,677.607644 683.185862,677.607644 C694.606539,659.334646 700.316877,650.198146 700.316877,650.198146 C713.688463,641.121955 720.374256,636.583859 720.374256,636.583859 C720.667766,621.270583 720.81452,613.613945 720.81452,613.613945 C730.60562,604.372931 735.50117,599.752424 735.50117,599.752424 C744.03749,604.190643 748.30565,606.409753 748.30565,606.409753 C778.914089,615.4723 794.218308,620.003573 794.218308,620.003573 C811.351506,605.799306 819.918104,598.697173 819.918104,598.697173 C838.244979,598.29603 847.408416,598.095459 847.408416,598.095459 L847.808581,615.242257 L886.861141,588.182326 L899.420121,588.182326 L899.420121,572.735882 C926.710486,567.208847 940.355669,564.44533 940.355669,564.44533 C949.771972,557.960465 954.480123,554.718032 954.480123,554.718032 C969.411454,550.615462 976.87712,548.564178 976.87712,548.564178 L990.36491,548.33086 C1010.36034,538.776953 1020.35805,534 1020.35805,534 Z"/>
              <path id="p-binnan" @mouseover="orgHover('滨南采油厂')" @click="open('滨南采油厂')" @mouseout="orgUnHover"
                    class="chang"
                    d="M945.373164,370 C958.774622,374.360909 965.475351,376.541363 965.475351,376.541363 C1003.43181,376.670242 1022.41003,376.734682 1022.41003,376.734682 C1064.22636,372.417746 1085.13453,370.259278 1085.13453,370.259278 C1101.29498,373.023374 1109.37521,374.405423 1109.37521,374.405423 C1116.56184,372.674457 1120.15515,371.808974 1120.15515,371.808974 C1131.0012,392.628761 1136.42422,403.038655 1136.42422,403.038655 C1136.80807,408.553679 1137,411.311191 1137,411.311191 C1128.16621,409.783818 1123.74932,409.020131 1123.74932,409.020131 C1102.57581,412.925701 1091.98906,414.878486 1091.98906,414.878486 C1075.48186,414.973085 1067.22826,415.020384 1067.22826,415.020384 C1060.55868,443.669077 1057.22389,457.993424 1057.22389,457.993424 C1045.23835,469.26945 1039.24557,474.907463 1039.24557,474.907463 C1022.91364,497.733943 1014.74767,509.147183 1014.74767,509.147183 C1024.58431,519.158716 1029.50264,524.164483 1029.50264,524.164483 C1029.82377,527.945026 1029.98433,529.835298 1029.98433,529.835298 C1022.29104,529.832526 1018.4444,529.83114 1018.4444,529.83114 C998.981192,539.312297 989.24959,544.052876 989.24959,544.052876 C980.590126,543.94061 976.260393,543.884477 976.260393,543.884477 C961.850626,547.626213 954.645742,549.49708 954.645742,549.49708 C943.490331,556.724603 937.912625,560.338365 937.912625,560.338365 C908.678487,566.019113 894.061419,568.859487 894.061419,568.859487 C894.208103,578.876564 894.281445,583.885103 894.281445,583.885103 C888.159573,583.880021 885.098637,583.87748 885.098637,583.87748 C863.348176,598.742319 852.472945,606.174739 852.472945,606.174739 C852.114332,598.094365 851.935025,594.054177 851.935025,594.054177 C829.801889,593.912344 818.735321,593.841427 818.735321,593.841427 C801.512177,608.059467 792.900604,615.168487 792.900604,615.168487 C764.336032,606.391417 750.053746,602.002882 750.053746,602.002882 C739.513298,596.715296 734.243074,594.071502 734.243074,594.071502 C721.785087,605.298557 715.556094,610.912084 715.556094,610.912084 C715.016554,626.369669 714.746785,634.098462 714.746785,634.098462 C701.842267,642.638064 695.390008,646.907865 695.390008,646.907865 C687.246021,660.302622 683.174027,667 683.174027,667 C683.905598,630.572711 684.271383,612.359067 684.271383,612.359067 C675.429142,611.969601 671.008021,611.774868 671.008021,611.774868 C671.370798,597.495382 671.552187,590.355639 671.552187,590.355639 C657.199798,571.563802 650.023603,562.167884 650.023603,562.167884 C632.636191,562.234874 623.942484,562.268368 623.942484,562.268368 C605.980828,534.09147 597,520.003021 597,520.003021 C597.515015,508.499691 597.772522,502.748026 597.772522,502.748026 C611.374369,482.858015 618.175292,472.91301 618.175292,472.91301 C632.310663,469.012347 639.378348,467.062015 639.378348,467.062015 C649.091904,459.844194 653.948681,456.235284 653.948681,456.235284 C688.963199,463.205473 706.470458,466.690568 706.470458,466.690568 C708.8535,467.140093 710.04502,467.364856 710.04502,467.364856 C728.611923,467.288164 737.895374,467.249818 737.895374,467.249818 C773.789072,478.408035 791.735921,483.987143 791.735921,483.987143 C810.062669,472.700028 819.226043,467.056471 819.226043,467.056471 C819.238999,441.447367 819.245477,428.642815 819.245477,428.642815 C859.203454,406.068283 879.182443,394.781017 879.182443,394.781017 C884.725388,396.086849 887.496861,396.739765 887.496861,396.739765 C889.863512,396.864129 891.046838,396.926312 891.046838,396.926312 C894.651578,395.028675 896.453948,394.079856 896.453948,394.079856 C897.512713,391.043637 898.042095,389.525527 898.042095,389.525527 C898.41363,386.552563 898.599397,385.06608 898.599397,385.06608 C899.534675,382.915425 900.002314,381.840097 900.002314,381.840097 L934.008962,370.143899 C941.585097,370.047966 945.373164,370 945.373164,370 Z"/>
              <path id="p-linpan" @mouseover="orgHover('临盘采油厂')" @click="open('临盘采油厂')" @mouseout="orgUnHover"
                    class="chang"
                    d="M311.400792,509.414621 C313.785543,501.499486 314.977919,497.541918 314.977919,497.541918 C327.356364,499.680684 333.545586,500.750068 333.545586,500.750068 C336.250436,505.524841 337.60286,507.912228 337.60286,507.912228 C343.515796,506.705886 346.472264,506.102715 346.472264,506.102715 C348.321413,510.194474 349.245987,512.240354 349.245987,512.240354 L351.988333,512.527908 C354.002859,506.534539 355.010123,503.537855 355.010123,503.537855 C365.084729,501.001455 370.122032,499.733254 370.122032,499.733254 C372.540333,503.705644 373.749483,505.691839 373.749483,505.691839 C382.023882,505.596186 386.161082,505.548359 386.161082,505.548359 C391.234105,501.655812 393.770617,499.709539 393.770617,499.709539 C412.200536,492.147768 421.415495,488.366883 421.415495,488.366883 C423.337663,490.065326 424.298747,490.914548 424.298747,490.914548 C426.057905,490.843401 426.937484,490.807827 426.937484,490.807827 C430.530794,484.290341 432.327448,481.031597 432.327448,481.031597 C439.332901,481.039898 442.835628,481.044048 442.835628,481.044048 L448.290124,494.499186 C449.182926,494.499186 449.629327,494.499186 449.629327,494.499186 C450.471607,493.902734 450.892748,493.604509 450.892748,493.604509 C452.396538,486.643537 453.148433,483.163052 453.148433,483.163052 C475.009047,485.531861 485.939353,486.716266 485.939353,486.716266 C486.812025,486.073173 487.248361,485.751627 487.248361,485.751627 L497.786143,472.985432 L503.020399,447.393161 L509.737725,442.93104 L536.279034,449.587462 C546.678869,458.383243 551.878787,462.781133 551.878787,462.781133 L554.378395,462.942993 L562.935791,460.170028 L568.088938,454.254131 C568.088938,452.738298 568.088938,451.980382 568.088938,451.980382 C565.08412,447.855816 563.581711,445.793533 563.581711,445.793533 C563.1807,441.481217 562.980195,439.325059 562.980195,439.325059 C569.559376,430.768412 572.848967,426.490088 572.848967,426.490088 L588.283541,422.562165 C589.130952,421.932512 589.554658,421.617685 589.554658,421.617685 C590.05829,418.538984 590.310105,416.999634 590.310105,416.999634 C600.593901,410.520092 605.735798,407.280321 605.735798,407.280321 C621.004994,402.431239 628.639592,400.006697 628.639592,400.006697 C647.95284,398.210624 657.609463,397.312587 657.609463,397.312587 C672.36516,391.11131 679.743009,388.010672 679.743009,388.010672 C691.87319,388.003557 697.938281,388 697.938281,388 C705.605244,391.270008 709.438725,392.905012 709.438725,392.905012 C711.087369,394.1659 711.911691,394.796344 711.911691,394.796344 C707.695552,396.120079 705.587483,396.781947 705.587483,396.781947 C705.400792,397.584725 705.307446,397.986114 705.307446,397.986114 C706.427592,403.990945 706.987665,406.993361 706.987665,406.993361 C707.972036,407.701276 708.464222,408.055234 708.464222,408.055234 C710.267981,407.984087 711.169861,407.948513 711.169861,407.948513 C727.395009,403.346469 735.507584,401.045448 735.507584,401.045448 L740.98221,416.875126 L742.631051,416.999634 L744.176284,416.053968 C744.94673,408.137646 745.331953,404.179486 745.331953,404.179486 C792.694247,419.803429 816.375394,427.615401 816.375394,427.615401 C816.791798,453.030397 817,465.737896 817,465.737896 C800.611447,476.107217 792.417171,481.291878 792.417171,481.291878 C756.989684,470.481838 739.27594,465.076819 739.27594,465.076819 C720.048342,464.866934 710.434543,464.761992 710.434543,464.761992 C673.303155,457.039745 654.737461,453.178621 654.737461,453.178621 C643.893198,460.923794 638.471066,464.79638 638.471066,464.79638 C624.548572,468.671931 617.587324,470.609706 617.587324,470.609706 C603.235401,491.29657 596.05944,501.640002 596.05944,501.640002 C595.389246,514.147694 595.05415,520.401541 595.05415,520.401541 C613.834953,549.719361 623.225355,564.378271 623.225355,564.378271 C640.715898,564.509103 649.461169,564.574519 649.461169,564.574519 C662.690578,582.024181 669.305282,590.749012 669.305282,590.749012 C668.97058,606.50023 668.803229,614.37584 668.803229,614.37584 C677.499953,614.605883 681.848315,614.720904 681.848315,614.720904 L680.625154,672.245856 C670.118355,672.590621 664.864956,672.763003 664.864956,672.763003 C640.647615,684.536202 628.538945,690.422801 628.538945,690.422801 C611.946729,709.104893 603.650621,718.445938 603.650621,718.445938 C590.51515,718.809185 583.947414,718.990808 583.947414,718.990808 C569.429324,727.217806 562.170279,731.331305 562.170279,731.331305 C544.434235,723.118536 535.566213,719.012152 535.566213,719.012152 C525.674746,737.582384 520.729012,746.8675 520.729012,746.8675 C500.09906,749.897189 489.784083,751.412033 489.784083,751.412033 C486.654936,786.527566 485.090363,804.085333 485.090363,804.085333 C482.136066,806.028444 480.658917,807 480.658917,807 C480.450123,795.5943 480.345726,789.891449 480.345726,789.891449 C478.708924,784.479513 477.890522,781.773544 477.890522,781.773544 C479.364316,774.087661 480.101212,770.244719 480.101212,770.244719 C479.146444,768.65853 478.669059,767.865436 478.669059,767.865436 C477.781389,767.531834 477.337553,767.365033 477.337553,767.365033 C461.279756,771.618455 453.250857,773.745166 453.250857,773.745166 C427.067142,764.038305 413.975285,759.184874 413.975285,759.184874 C393.030365,761.462378 382.557906,762.601129 382.557906,762.601129 C375.350368,768.267615 371.7466,771.100858 371.7466,771.100858 C349.099358,777.722299 337.775737,781.03302 337.775737,781.03302 C319.581452,783.056765 310.484309,784.068637 310.484309,784.068637 C284.521624,773.992205 271.540281,768.953989 271.540281,768.953989 C269.81704,769.137786 268.955419,769.229685 268.955419,769.229685 C267.884215,771.224576 267.348613,772.222021 267.348613,772.222021 C258.768719,770.264285 254.478772,769.285417 254.478772,769.285417 C260.439861,760.220858 263.420405,755.688578 263.420405,755.688578 C264.079941,754.569194 264.40971,754.009502 264.40971,754.009502 C264.385238,752.283785 264.373003,751.420926 264.373003,751.420926 C262.486752,748.109416 261.543627,746.45366 261.543627,746.45366 C234.541708,744.207778 221.040749,743.084836 221.040749,743.084836 C209.013583,730.264886 203,723.854911 203,723.854911 C207.764371,714.590744 210.146557,709.95866 210.146557,709.95866 C218.919457,713.5848 223.305907,715.39787 223.305907,715.39787 C224.70234,715.257552 225.400557,715.187393 225.400557,715.187393 C226.453605,714.60438 226.980129,714.312874 226.980129,714.312874 C226.493075,700.481446 226.249547,693.565733 226.249547,693.565733 C229.917454,680.812582 231.751407,674.436006 231.751407,674.436006 C231.796008,672.850212 231.818308,672.057315 231.818308,672.057315 C230.956688,671.264023 230.525877,670.867377 230.525877,670.867377 C226.95625,670.304128 225.171436,670.022503 225.171436,670.022503 C229.017745,663.151652 230.9409,659.716226 230.9409,659.716226 C230.373722,649.689992 230.090133,644.676876 230.090133,644.676876 C231.81969,639.43925 232.684468,636.820437 232.684468,636.820437 C232.776037,635.188002 232.821822,634.371784 232.821822,634.371784 L228.100867,615.244429 C260.626846,568.114626 276.889835,544.549724 276.889835,544.549724 C282.017191,526.9094 284.58087,518.089238 284.58087,518.089238 C298.490044,511.627377 305.444632,508.396446 305.444632,508.396446 C306.733761,508.719076 307.378326,508.880391 307.378326,508.880391 L308.865569,509.969265 C310.555718,509.599502 311.400792,509.414621 311.400792,509.414621 Z"/>
              <path id="p-xinchun" @mouseover="orgHover('新春采油厂')" @click="open('新春采油厂')"
                    @mouseout="orgUnHover"
                    class="chang"
                    d="M468,104.1c10.8-7.7,16.2-11.6,16.2-11.6c7.7,2.1,11.5,3.2,11.5,3.2c1.2-0.3,1.8-0.4,1.8-0.4c3.1-4.5,4.7-6.7,4.7-6.7c14.2,1.8,21.3,2.7,21.3,2.7c11.9,13.3,17.9,19.9,17.9,19.9c0.5,8.3,0.7,12.5,0.7,12.5c5.8,4,8.8,6.1,8.8,6.1c4.2,6.8,6.3,10.2,6.3,10.2c0.2,1.3,0.3,2,0.3,2c-3.9,4-5.8,6-5.8,6c-8,0.1-12,0.1-12,0.1c-1.9,2.3-2.8,3.5-2.8,3.5c0.1,1.8,0.1,2.8,0.1,2.8c0.5,1.2,0.8,1.9,0.8,1.9c8.9,2.9,13.4,4.3,13.4,4.3c1.8,9.2,2.7,13.8,2.7,13.8c-10.9,3.7-16.4,5.6-16.4,5.6c-8.6,8.7-12.8,13.1-12.8,13.1c-0.3,2.7-0.4,4-0.4,4c0.3,1.7,0.5,2.6,0.5,2.6c0.7,2.6,1.1,3.9,1.1,3.9c6.1,1,9.2,1.4,9.2,1.4c9.2,12.7,13.7,19.1,13.7,19.1c-0.1,1-0.2,1.5-0.2,1.5c-6.8,7.5-10.2,11.3-10.2,11.3c0.1,1.2,0.2,1.7,0.2,1.7c4.4,5.3,6.7,8,6.7,8c0,1.5,0,2.2,0,2.2c-9.9,6.6-14.8,9.8-14.8,9.8l-10.6-4.5c-1.4,0-2.1,0-2.1,0c-4.9,2.3-7.4,3.4-7.4,3.4c-13.2-2.4-19.9-3.6-19.9-3.6c-1.2-3.8-1.8-5.7-1.8-5.7c-0.1-6.8-0.2-10.1-0.2-10.1l-0.5-3.3c-1.4-1.4-2.1-2.2-2.1-2.2c-3-0.4-4.6-0.6-4.6-0.6c-0.5,1-0.8,1.5-0.8,1.5c1.2,4.1,1.8,6.1,1.8,6.1c-0.1,2.3-0.1,3.4-0.1,3.4c-17.5,9.2-26.3,13.8-26.3,13.8c-1-0.2-1.5-0.3-1.5-0.3c-7.6-8.3-11.3-12.4-11.3-12.4c-1,0-1.6,0.1-1.6,0.1c-5.9,7.9-8.9,11.9-8.9,11.9c-0.1,4.3-0.1,6.5-0.1,6.5c7.1,8.4,10.7,12.5,10.7,12.5c6.4,4.4,9.7,6.6,9.7,6.6c0.2,1,0.3,1.6,0.3,1.6c-2.4,4.9-3.6,7.3-3.6,7.3c-6.8,3-10.1,4.4-10.1,4.4c-0.7,0.5-1.1,0.7-1.1,0.7c-0.1,10.6-0.1,15.9-0.1,15.9c-0.5,0.5-0.8,0.8-0.8,0.8c-2.9,0.2-4.3,0.2-4.3,0.2c-5.3-2.7-7.9-4.1-7.9-4.1c-0.4-8.2-0.7-12.3-0.7-12.3c-6.3-2.9-9.5-4.4-9.5-4.4c-0.3-4.3-0.5-6.4-0.5-6.4c-4-4.1-6.1-6.2-6.1-6.2c-1,0.3-1.5,0.5-1.5,0.5c-4.6,6.1-6.9,9.2-6.9,9.2c-2.2,0-3.3,0-3.3,0c-4.6-1.2-6.9-1.8-6.9-1.8C377.2,279.7,371,276,371,276c-13.2-3-19.9-4.6-19.9-4.6c0-9,0-13.5,0-13.5c-1.3-3.7-1.9-5.6-1.9-5.6c-0.2-4-0.3-6-0.3-6c2.4-4.9,3.5-7.4,3.5-7.4c5.9-2.1,8.9-3.1,8.9-3.1c3-1.9,4.5-2.9,4.5-2.9c2.3-6.1,3.5-9.2,3.5-9.2c-0.1-4.3-0.1-6.5-0.1-6.5c-3.6-3.7-5.4-5.6-5.4-5.6c-1.1,0.4-1.7,0.6-1.7,0.6c-6.6,5.5-9.8,8.3-9.8,8.3c-0.3,1.2-0.5,1.8-0.5,1.8c0.5,1.5,0.8,2.2,0.8,2.2c1,2.1,1.6,3.1,1.6,3.1c-4.1,5-6.2,7.5-6.2,7.5c-4-1.8-6-2.6-6-2.6c-1.4,0.1-2.1,0.1-2.1,0.1c-5.5,2-8.2,3-8.2,3c-21.4,0-32.1,0.1-32.1,0.1c0-9,0.1-13.6,0.1-13.6c11.5-1.5,17.3-2.3,17.3-2.3c2.7,0.1,4.1,0.2,4.1,0.2c0.7-0.8,1.1-1.2,1.1-1.2c1.2-6.8,1.8-10.3,1.8-10.3c7.2-2,10.8-3,10.8-3c3.6-9.5,5.5-14.2,5.5-14.2c-0.4-8.4-0.5-12.6-0.5-12.6c7.1-16.3,10.7-24.5,10.7-24.5c14.4-8.9,21.5-13.3,21.5-13.3c3-3.6,4.6-5.5,4.6-5.5c17,2.3,25.4,3.5,25.4,3.5c9.8-7.9,14.7-11.9,14.7-11.9c8.5,3.8,12.7,5.7,12.7,5.7c27-1,40.4-1.5,40.4-1.5c0.7-0.5,1.1-0.7,1.1-0.7c0.4-6.2,0.6-9.3,0.6-9.3c1.9-2.6,2.9-3.9,2.9-3.9c-0.2-1.5-0.4-2.2-0.4-2.2l-3.1-0.8C468.9,107.5,468,104.1,468,104.1z"/>

              <!-- 厂名称 -->
              <text transform="matrix(1 0 0 1 1412.6 222)" class="txt">海洋</text>
              <text transform="matrix(1 0 0 1 1265.6 242)" class="txt">桩西</text>
              <text transform="matrix(1 0 0 1 1005.6 277)" class="txt">河口</text>
              <text transform="matrix(1 0 0 1 1378.6 326)" class="txt">孤东</text>
              <text transform="matrix(1 0 0 1 1299.6 386)" class="txt">孤岛</text>
              <text transform="matrix(1 0 0 1 1276.6 467)" class="txt">东辛</text>
              <text transform="matrix(1 0 0 1 1147.6 468)" class="txt">胜采</text>
              <text transform="matrix(1 0 0 1 1165.2336 635)" class="txt">现河</text>
              <text transform="matrix(1 0 0 1 854.6 668)" class="txt">纯梁</text>
              <text transform="matrix(1 0 0 1 799.6 507)" class="txt">滨南</text>
              <text transform="matrix(1 0 0 1 437.6 629)" class="txt">临盘</text>
              <text transform="matrix(1 0 0 1 436.0237 206.59)" class="txt">新春</text>


              <g ref="orgText" style="visibility: hidden;" :transform="state.translate">
                    <rect stroke="#00D2FF" stroke-width="2" fill-opacity="0.62" fill="#000000" x="1" y="1" width="300"
                          height="310" rx="8"></rect>
                <!--纯梁采油厂-->
                <text id="clcyc" font-size="20" font-weight="500" letter-spacing="0.699999984" fill="#00FFF3">
                        <tspan x="20" y="30">纯梁采油厂</tspan>
                    </text>
                <!--                    <polygon id="三角形" fill="#00D2FF" transform="state.translate(269.000000, 63.500000) rotate(-270.000000) state.translate(-269.000000, -63.500000) " points="269 59.5 276.5 67.5 261.5 67.5"></polygon>-->
                <text id="titie：" font-size="14" font-weight="normal" line-spacing="27" letter-spacing="0.699999984"
                      fill="#FFFFFF">
                        <tspan x="22" y="60">注入井：</tspan>
                  <tspan x="22" y="90">注入量：</tspan>
                  <tspan x="22" y="120">受效井：</tspan>
                  <tspan x="22" y="150">产油量：</tspan>
                    </text>
                <text id="56↑-124↓-3↑" font-size="14" font-weight="400" line-spacing="27">
                        <tspan x="120" y="60" :fill="state.currentObj1.ZRJ >= 0 ? '#24E9EA' : '#FF5E5E'">
                            {{ state.currentObj1.ZRJ }}
                        </tspan>
                  <tspan x="120" y="90" :fill="state.currentObj1.ZRL >= 0 ? '#24E9EA' : '#00FF60'">
                            {{ state.currentObj1.ZRL }}
                        </tspan>
                  <tspan x="120" y="120" :fill="state.currentObj1.SXJ >= 0 ? '#24E9EA' : '#FF5E5E'">
                            {{ state.currentObj1.SXJ }}
                        </tspan>
                  <tspan x="120" y="150" :fill="state.currentObj1.RCYL >= 0 ? '#24E9EA' : '#FF5E5E'">
                            {{ state.currentObj1.RCYL }}
                        </tspan>
                    </text>

                <text id="titie：" font-size="14" font-weight="normal" line-spacing="27" letter-spacing="0.699999984"
                      fill="#FFFFFF">
                        <tspan x="250" y="60">口</tspan>
                  <tspan x="255" y="90">t</tspan>
                  <tspan x="250" y="120">口</tspan>
                  <tspan x="255" y="150">t</tspan>
                    </text>

                <!--东胜公司-->
                <text id="dsgs" font-size="20" font-weight="500" letter-spacing="0.699999984" fill="#00FFF3">
                        <tspan x="20" y="180">东胜公司</tspan>
                    </text>
                <text id="dsgstitie：" font-size="14" font-weight="normal" line-spacing="27" letter-spacing="0.699999984"
                      fill="#FFFFFF">
                        <tspan x="22" y="210">注入井：</tspan>
                  <tspan x="22" y="240">注入量：</tspan>
                  <tspan x="22" y="270">受效井：</tspan>
                  <tspan x="22" y="300">产油量：</tspan>
                    </text>
                <text id="56↑-123↑" font-size="14" font-weight="400" line-spacing="27">
                        <tspan x="120" y="210" :fill="state.currentObj2.ZRJ >= 0 ? '#24E9EA' : '#FF5E5E'">
                            {{ state.currentObj2.ZRJ }}
                        </tspan>
                  <tspan x="120" y="240" :fill="state.currentObj2.ZRL >= 0 ? '#24E9EA' : '#00FF60'">
                            {{ state.currentObj2.ZRL }}
                        </tspan>
                  <tspan x="120" y="270" :fill="state.currentObj2.SXJ >= 0 ? '#24E9EA' : '#FF5E5E'">
                            {{ state.currentObj2.SXJ }}
                        </tspan>
                  <tspan x="120" y="300" :fill="state.currentObj2.RCYL >= 0 ? '#24E9EA' : '#FF5E5E'">
                            {{ state.currentObj2.RCYL }}
                        </tspan>
                    </text>

                <text id="dsgstitieas：" font-size="14" font-weight="normal" line-spacing="27"
                      letter-spacing="0.699999984"
                      fill="#FFFFFF">
                        <tspan x="250" y="210">口</tspan>
                  <tspan x="255" y="240">t</tspan>
                  <tspan x="250" y="270">口</tspan>
                  <tspan x="255" y="300">t</tspan>
                    </text>
                </g>

            </g>
        </svg>
    </div>
    <div class="absolute" style="top:5vh;">
      <div class="light-green size-3 margin-bottom-1">
        集输总厂（日度）
      </div>
      <div class="flex-row flex-row-items-between">
        <div class="relative" style="height: 12vh;width: 28vh;">
          <whr-border-box1>
            <div class="box-content" style="">
              <div class="flex-row flex-row-items-evenly" style="align-items: baseline;width: 100%;">
                <div class="size-3 yellow">进油</div>
                <div class="size-4 yellow blod">188803</div>
                <div class="size-3 light-green">吨</div>
              </div>

            </div>
          </whr-border-box1>
        </div>
        <div class="relative" style="height: 12vh;width: 28vh;">
          <whr-border-box1>
            <div class="box-content" style="">
              <div class="flex-row flex-row-items-evenly" style="align-items: baseline;width: 100%;">
                <div class="size-3 yellow">进油</div>
                <div class="size-4 yellow blod">188803</div>
                <div class="size-3 light-green">吨</div>
              </div>

            </div>
          </whr-border-box1>
        </div>
      </div>

    </div>
    <div class="absolute" style="top:24vh;">
      <div class="light-green size-3 margin-bottom-1">
        集输交接曲线
      </div>
      <div class="relative" style="height: 20vh;width: 56vh;">
        <whr-border-box1>
          <div class="box-content" style="padding-top: 0.5vh" ref="chart1Ref">

          </div>
        </whr-border-box1>
      </div>

    </div>
    <div class="absolute left-items-box" style="margin-top: 50vh">
      <dv-border-box9 style="width:30vh;height:5vh;background-color: #84a4c524">
        <div class="white left-items-box-content">
          单位原油交接日度数据
        </div>
      </dv-border-box9>
      <dv-border-box9 style="width:30vh;height:5vh;background-color: #84a4c524">
        <div class="white left-items-box-content">
          单位原油交接阶段数据
        </div>
      </dv-border-box9>
      <dv-border-box9 style="width:30vh;height:5vh;background-color: #84a4c524">
        <div class="white left-items-box-content">
          单位原油交油数据
        </div>
      </dv-border-box9>
      <dv-border-box9 style="width:30vh;height:5vh;background-color: #84a4c524">
        <div class="white left-items-box-content">
          单位原油接油数据
        </div>
      </dv-border-box9>
      <dv-border-box9 style="width:30vh;height:5vh;background-color: #84a4c524">
        <div class="white left-items-box-content">
          单位原油交接实时数据
        </div>
      </dv-border-box9>
      <dv-border-box9 style="width:30vh;height:5vh;background-color: #84a4c524">
        <div class="white left-items-box-content">
          单位原油交接当前数据
        </div>
      </dv-border-box9>
    </div>
    <div class="absolute right-items-box-content"  style="display: flex;flex-direction: column">
      <div class="light-green size-3 margin-bottom-1" style="text-align: right">
        集输交接曲线
      </div>
      <dv-border-box9 style="flex: 1;background-color: #84a4c524" :color="['#87fcfd','#87fcfd']">
          <div class="box-content" style="padding-top: 0.5vh" ref="chart2Ref">

          </div>
      </dv-border-box9>
    </div>

  </div>

</template>

<script setup lang="ts">
import {ref, reactive, onMounted, Ref} from "vue";
import WhrBorderBox1 from "@/components/Whr-Border-Box-1.vue";
import * as echarts from 'echarts';

const state = reactive({
  currentObj1: {
    ZRJ: 0,
    ZRL: 0,
    SXJ: 0,
    RCYL: 0
  },

  currentObj2: {
    ZRJ: 0,
    ZRL: 0,
    SXJ: 0,
    RCYL: 0
  },
  currentOrgName1: "纯梁采油厂",
  currentOrgName2: "东胜公司",
  translate: "",
});

const orgText = ref();

const orgTextList = [
  {orgName: '新春采油厂', x: 599, y: 90},
  {orgName: '临盘采油厂', x: 247, y: 658},
  {orgName: '纯梁采油厂', x: 652, y: 599},
  {orgName: '滨南采油厂', x: 597, y: 548},
  {orgName: '河口采油厂', x: 803, y: 308},
  {orgName: '现河采油厂', x: 963, y: 666},
  {orgName: '胜利采油厂', x: 955, y: 489},
  {orgName: '东辛采油厂', x: 1104, y: 498},
  {orgName: '孤岛采油厂', x: 1097, y: 417},
  {orgName: '孤东采油厂', x: 1136, y: 367},
  {orgName: '桩西采油厂', x: 1103, y: 283},
  {orgName: '海洋采油厂', x: 1070, y: 253},

  {orgName: '石油开发中心', x: 593, y: 383},
  {orgName: '东胜公司', x: 593, y: 383},
  {orgName: '鲁胜公司', x: 593, y: 283},
  {orgName: '鲁明公司', x: 593, y: 583},
  {orgName: '新春公司', x: 599, y: 90}];

const dwObj = {
  "胜利采油厂": "30200001",
  "东辛采油厂": "30200002",
  "现河采油厂": "30200003",
  "纯梁采油厂": "30200004",
  "滨南采油厂": "30200005",
  "临盘采油厂": "30200006",
  "河口采油厂": "30200007",
  "孤东采油厂": "30200008",
  "孤岛采油厂": "30200009",
  "桩西采油厂": "30200010",
  "海洋采油厂": "30200012",
  "新春采油厂": "30203569"
}

const chart1Ref = ref(null)
const chart2Ref = ref(null)
const option1 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: ''
      }
    }
  },
  legend: {
    right: 20,
    textStyle: {
      color: '#fff',
    },
    icon: 'roundRect',
    // data: ['进油', '出油'],
    data: [{
      name: '进油',
      itemStyle: {
        color: 'rgb(247, 205, 70)',
      }
    }, {
      name: '出油',
      itemStyle: {
        color: 'rgb(164, 249, 251)',
      }
    }]
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        color: '#ffffff'
      },
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        color: '#ffffff'
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255,0.38)'
        }
      }
    }
  ],
  series: [
    {
      name: '进油',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 1,
        color: 'rgb(247, 205, 70)'
      },
      label: {
        style: {
          color: '#ffffff'
        }
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(247, 205, 70)'
          },
          {
            offset: 1,
            color: 'rgba(247, 205, 70,0.3)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: '出油',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 1,
        color: 'rgb(164, 249, 251)'
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(164, 249, 251)'
          },
          {
            offset: 1,
            color: 'rgba(164, 249, 251,0.3)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
  ]
};
const option2 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel: {
      show:false,
      color: '#ffffff'
    },
    splitLine: {
      show:false,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.38)'
      }
    }
  },
  yAxis: {
    type: 'category',
    data:['胜采', '东辛', '现河', '纯梁', '滨南', '临盘', '河口', '孤东', '孤岛', '桩西', '海洋'],
    axisLabel: {
      color: '#ffffff'
    },
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744]
    },

  ]
};
onMounted(() => {
  const myChart1 = echarts.init(chart1Ref.value as HTMLElement);
  const myChart2 = echarts.init(chart2Ref.value as HTMLElement);

  option1 && myChart1.setOption(option1);
  option1 && myChart2.setOption(option2);

})
</script>

<style scoped lang="scss">
:deep(.header) {
  position: absolute;
}

.gis {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.chang {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #FFFFFF;
  fill-opacity: 0;
  cursor: pointer;
}

.chang:hover {
  fill: #007BFF;
  fill-opacity: 0.8;
}

.txt {
  fill: #FFFFFF;
  pointer-events: none;
  font-size: 25px;
}

#p-dongxin, #p-chunliang {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #00F1F7;
  fill-opacity: 0.5045;
  stroke: #00F1F7;
}

#p-chunliang:hover, #p-dongxin:hover {
  fill-opacity: 1;
}

tspan {
  font-size: 25px;
}

.homepage {
  background-color: #041d57;
  height: 100vh;
  width: 100%;
}

.box-content {
  z-index: 9999;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.left-items-box {
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.left-items-box-content {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.right-items-box-content {
  top: 50%;
  /* left: 0px; */
  bottom: auto;
  width: 56vh;
  height: 60vh;
  /* transform: translate(-50%, -50%); */
  right: 0;
  /* bottom: 50%; */
  transform: translateY(-50%);
}

</style>
